/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import {
  Avatar,
  Button,
  Dropdown,
  Input,
  Layout,
  Menu,
  Space,
  theme,
} from "antd";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const Index: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  // 从localStorage获取上次保存的展开状态，如果没有则为空数组
  const [openKeys, setOpenKeys] = useState<string[]>(() => {
    const saved = localStorage.getItem("menuOpenKeys");
    return saved ? JSON.parse(saved) : [];
  });
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  console.log(location.pathname);
  const username = localStorage.getItem("username");

  return (
    <Layout style={{ height: "100vh", overflow: "hidden" }}>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ position: "sticky", top: 0, height: "100vh" }}>
        <div className="demo-logo-vertical" />
        <Menu
          style={{ height: "100%" }}
          theme="light"
          mode="inline"
          defaultSelectedKeys={[location.pathname]}
          selectedKeys={[location.pathname]}
          openKeys={openKeys}
          onOpenChange={(keys) => {
            // 只保留最后一个展开的key，实现只展开一个下拉菜单
            const latestOpenKey = keys.find(
              (key) => openKeys.indexOf(key) === -1
            );
            const newOpenKeys = latestOpenKey ? [latestOpenKey] : [];
            setOpenKeys(newOpenKeys);
            // 保存展开状态到localStorage
            localStorage.setItem("menuOpenKeys", JSON.stringify(newOpenKeys));
          }}
          onClick={(e) => {
            navigate(e.key);
          }}
          items={[
            {
              key: "/index/home",
              icon: <i className="iconfont icon-shouye"></i>,
              label: "首页",
            },
            {
              key: "/index/inventory",
              icon: <i className="iconfont icon-huopinguanli"></i>,
              label: "货品管理",
              children: [
                { key: "/index/inventory/message", label: "货品信息" },
                { key: "/index/inventory/classify", label: "货品类型" },
              ],
            },
            {
              key: "/index/warehouse",
              icon: <i className="iconfont icon-churukuguanli"></i>,
              label: "出入库管理",
              children: [
                { key: "/index/warehouse/goStorage", label: "入库管理" },
                { key: "/index/warehouse/toStorage", label: "出库管理" },
                { key: "/index/warehouse/check", label: "库存盘点" },
                { key: "/index/warehouse/allot", label: "库存调拨" },
              ],
            },
            {
              key: "/index/unit",
              icon: <i className="iconfont icon-wanglaidanwei"></i>,
              label: "往来单位",
              children: [
                { key: "/index/unit/client", label: "客户管理" },
                { key: "/index/unit/supplier", label: "供应商管理" },
              ],
            },
            {
              key: "/index/store/store",
              icon: <i className="iconfont icon-cangkuguanli"></i>,
              label: "仓库管理",
            },
            {
              key: "/index/organization",
              icon: <i className="iconfont icon-zuzhiguanli"></i>,
              label: "组织管理",
              children: [
                { key: "/index/organization/institution", label: "组织机构" },
                { key: "/index/organization/post", label: "岗位管理" },
                { key: "/index/organization/user", label: "用户管理" },
                { key: "/index/organization/role", label: "角色管理" },
              ],
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: "0 16px",
            background: colorBgContainer,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{ fontSize: 16 }}
          />

          {/* 右侧工具栏 */}
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <Input.Search
              placeholder="输入搜索关键词"
              style={{ width: 200, borderRadius: 24 }}
              allowClear
            />
            <span style={{ cursor: "pointer", color: "#555" }}>消息</span>
            <a style={{ color: "#555" }}>项目介绍</a>
            <a style={{ color: "#555" }}>作品首页</a>
            <Dropdown
              trigger={["click"]}
              menu={{
                items: [
                  { key: "profile", label: "个人中心" },
                  { type: "divider" as any },
                  { key: "logout", label: "退出系统" },
                ],
                onClick: ({ key }) => {
                  if (key === "logout") {
                    localStorage.removeItem("token");
                    localStorage.removeItem("username");
                    navigate("/login", { replace: true });
                  }
                },
              }}>
              <Space size={8} style={{ cursor: "pointer" }}>
                <Avatar size={32} icon={<UserOutlined />} />
                <span style={{ color: "#666" }}>{username}</span>
              </Space>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: "calc(100vh - 64px)",
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            overflow: "auto",
          }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Index;
